<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="box">1</div>
  <div id="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <ul>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script>
    // 1.获取匹配到的第一个元素
    const box = document.querySelector('div');
    console.log(box);
    // id选择器
    const box1 = document.querySelector('#box');
    console.log(box1);
    // 获取第一个li
    const li1 = document.querySelector('ul li:first-child');
    console.log(li1);
    // 获取最后一个li
    const li2 = document.querySelector('ul li:last-child');
    console.log(li2);
    // 获取第n(2)个li
    const li3 = document.querySelector('ul li:nth-child(2)');
    console.log(li3);

    // 2.获取匹配到的所有元素
    const allLi = document.querySelectorAll('ul li');
    console.log(allLi,allLi[0]);

    // 3.根据id获取元素（一个）
    const box2 = document.getElementById('box');
    console.log(box2);

    // 4.根据标签名获取元素（所有）
    const allDiv = document.getElementsByTagName('div');
    console.log(allDiv);

    // 5.根据类名获取元素（所有）
    const allBox = document.getElementsByClassName('box');
    console.log(allBox);

    
  </script>
</body>
</html>